<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col">
				<view class="fun-flex-col section">
					<view class="fun-flex-col">
						<view class="fun-flex-row fun-items-center">
							<view class="fun-flex-col fun-items-center section_2 equal-division-item">
								<text class="fun-self-start text_3">12.24%</text>
								<text class="fun-self-start font_2 text_5 mt-14">One year return</text>
							</view>
							<view class="fun-flex-col fun-items-center section_2 equal-division-item">
								<text class="font text_4">+0.19%</text>
								<text class="font_2 text_6 mt-14">DailyYield</text>
							</view>
							<view class="fun-flex-col fun-items-center section_2 equal-division-item">
								<text class="fun-self-end font equity">Equity Asset</text>
								<text class="fun-self-end font_3 text_7 mt-10">Asset Class</text>
							</view>
						</view>
						<!-- <view class="fun-flex-row group_3">
							<view class="fun-flex-col fun-justify-start text-wrapper">
								<text class="font_2 text_8 text_9">Equity static</text>
							</view>
							<view class="fun-flex-col fun-justify-start text-wrapper ml-5">
								<text class="font_3 text_8 text_10">Risk Rate:R4</text>
							</view>
						</view> -->
						<view class="fun-flex-row fun-justify-between fun-items-center group_4">
							<view class="fun-flex-row fun-items-center">
								<text class="font_4 text_11">Redeemable After</text>
								<text class="font_4 text_12">7days</text>
							</view>
							<text class="font_2 text_13">As of 06/21/2024</text>
						</view>
					</view>
					<view class="fun-mt-26 fun-flex-col">
						<view class="fun-flex-col fun-relative group_5">
							<view class="divider view"></view>
							<view class="divider"></view>
							<view class="divider"></view>
							<view class="divider"></view>
							<view class="divider"></view>
							<view class="group_6 pos_2"></view>
							<view class="fun-flex-col fun-justify-start fun-items-center image-wrapper pos">
								<image class="fun-shrink-0 image_5"
									src="../../static/1d4fb597b19ebef52a572c9f0047efcf.png" />
							</view>
						</view>
						<view class="fun-flex-row fun-justify-between group_7">
							<text class="font_5">2023.12.11</text>
							<text class="font_5">2024.06.23</text>
						</view>
						<view class="divider_2 view_2"></view>
						<view class="fun-flex-col">
							<view class="fun-flex-col">
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper_2">
										<text class="font text_14 text_15">Time interval</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2">
										<text class="font text_14 text_16">Interval Yield</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_2">
										<text class="font text_14 text_17">Annual Yield</text>
									</view>
								</view>
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper_2">
										<text class="font_4 text_18">1Month</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_2">
										<text class="font_6 text_19">1.20%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_2">
										<text class="font_6 text_20">9.41%</text>
									</view>
								</view>
							</view>
							<view class="fun-flex-col">
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper_3">
										<text class="font_4 text_21">3month</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_22">2.67%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_23">8.61%</text>
									</view>
								</view>
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper_3">
										<text class="font_4 text_24">6month</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_25">6.76%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_26">10.99%</text>
									</view>
								</view>
							</view>
							<view class="fun-flex-col">
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_3">
										<text class="font_4 text_27">Last one year</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_3">
										<text class="font_6 text_28">12.24%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_29">12.47%</text>
									</view>
								</view>
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-start text-wrapper_2">
										<text class="font_4 text_30">YTD</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2">
										<text class="font_6">10.18%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_2">
										<text class="font_6 text_31">11.88%</text>
									</view>
								</view>
								<view class="fun-flex-row">
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_4 text_32">Sinceinception</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_33">25.7%</text>
									</view>
									<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
										<text class="font_6 text_34">13.26%</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fun-mt-16 fun-flex-col section_3">
					<view class="fun-flex-col">
						<text class="fun-self-start font_4 text_35">Transaction Rules</text>
						<view class="fun-mt-12 fun-flex-row fun-justify-between fun-items-center fun-self-stretch">
							<text class="font_7 text_36">Buy now</text>
							<text class="font_7 text_37">Hold for 7 days</text>
							<text class="font text_38">Redeem</text>
						</view>
						<view class="fun-mt-12 fun-flex-col fun-justify-start fun-self-stretch fun-relative group_8">
							<view class="divider_3"></view>
							<view class="section_4 pos_3"></view>
							<view class="section_4 pos_4"></view>
							<view class="section_4 pos_5"></view>
						</view>
					</view>
					<view class="fun-flex-col mt-21">
						<view class="fun-flex-col section_5">
							<text class="fun-self-start font_8 text_39">Buying Fund Shares</text>
							<view
								class="fun-mt-16 fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch">
								<text class="font_9 text_14 text_40">Management Expenses</text>
								<text class="font">0.19%</text>
							</view>
							<view class="fun-mt-16 fun-flex-row fun-justify-between fun-items-center fun-self-stretch">
								<text class="font_10 text_14">Time-limited reduction</text>
								<text class="font">0.18%</text>
							</view>
							<view
								class="fun-mt-16 fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch">
								<text class="font_9 text_14 text_41">NetExpenses</text>
								<text class="font">0.01%</text>
							</view>
							<view class="fun-mt-16 fun-flex-row fun-self-stretch">
								<text class="fun-shrink-0 fun-self-start font_10 text_14 text_43">ShareConfirmation
									Time</text>
								<text class="fun-flex-1 font_11 text_42 ml-25">
									Your fund shares will be confirmed
									<br />
									on the next trading day
								</text>
							</view>
						</view>
						<view class="fun-mt-12 fun-flex-col section_5">
							<text class="fun-self-start font_8 text_39">Selling Fund Shares</text>
							<view class="fun-mt-14 fun-flex-row fun-justify-between fun-items-center fun-self-stretch">
								<text class="font_9 text_14 text_44">RedemptionExpenses</text>
								<text class="font">0</text>
							</view>
							<view class="fun-mt-14 fun-flex-row fun-justify-between fun-self-stretch">
								<text class="fun-self-start font_9 text_14 text_45">SellingShares</text>
								<view class="fun-flex-col fun-items-start group_9">
									<text class="font_11 text_46">
										Thisproductsets a minimum holding period and can be redeemed after
										<br />
									</text>
									<text class="font_11">this o peration period.</text>
								</view>
							</view>
							<view class="fun-mt-14 fun-flex-row fun-justify-between fun-self-stretch group_10">
								<text class="fun-self-start font_10 text_14">Arrival time</text>
								<text class="font_11 text_47">
									Selling shares before 15:00on T and your funds will arrive on T+1 in your
									withdrawable accounts.T
									refers to the working day of the Exchange.
								</text>
							</view>
						</view>
						<view class="fun-mt-12 fun-flex-col section_6">
							<view class="fun-flex-row fun-justify-between fun-items-center">
								<text class="font_4 text_48">Objective</text>
								<image class="image_6" src="../../static/1ac12fa2759dff021b408ec598d39c61.png" />
							</view>
							<text class="font_2 text_14 text_49">
								The Fund aims to provide the highest possible level of current income while still
								maintaining liquidity
								and providing maximum safety of principal.
							</text>
							<view class="divider_2 view_3"></view>
							<view class="fun-flex-col group_11">
								<text class="fun-self-start font_11 text_50">
									Invests solely in debt securities of the U.S.Treasury,including Treasury bills,bonds
									and notes.These
									investments carry different interest rates,maturities and issue dates.
								</text>
								<text class="fun-self-stretch font_11 text_42 mt-11">
									The interest on these securities is generally exempt from state and local income
									taxes.
								</text>
								<text class="fun-self-stretch font_11 text_42 mt-11">
									The Fund is a money market fund managed to meet the requirem ents of Rule 2a-7 un
									der the Investment
									Company Act of 1940.
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fun-flex-col section_7">
			<text class="fun-self-center text_51">Remaining purchasable amount >$20 million</text>
			<view class="fun-flex-row fun-self-stretch mt-7">
				<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_4">
					<text class="font_8 text_52">My favourites</text>
				</view>
				<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_5 ml-15">
					<text class="text_53" @click="buy">Buy</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				title: ""
			};
		},
		onLoad(potion) {
			this.title = potion.title
		},

		onReady() {
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		methods: {
			buy(){
				uni.navigateTo({url:`/pages/myPositions/addPurchase`})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-87 {
		margin-left: 174rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}
	.mt-10 {
		margin-top: 20rpx;
	}

	.mt-14 {
		margin-top: 28rpx;
	}

	.ml-25 {
		margin-left: 50rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.page {
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding: 32rpx 32rpx 80rpx 32rpx;

			.group_2 {
				padding-left: 36rpx;

				.text {
					color: #ffffff;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			.image_4 {
				width: 48rpx;
				height: 48rpx;
			}

			.text_2 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 300;
			}

			.section {
				background-color: #1b1d53;
				border-radius: 16rpx;

				.section_2 {
					flex: 1 1 228rpx;

					.text_3 {
						margin-left: 8rpx;
						color: #5ceec4;
						font-size: 24rpx;
						font-family: SF Pro Display;
						font-weight: 700;
					}
					.text_4 {
						color: #5ceec4;
					}
				}

				.equal-division-item {
					padding: 32rpx 32rpx 24rpx;
					background-color: #1b1d53;
					border-radius: 16rpx;
					.equity{
						padding: 8rpx;
						background: rgba(153,153,153,0.2);
						border-radius: 8rpx;
					}
				}

				.group_3 {
					padding: 0 24rpx;

					.text-wrapper {
						padding: 8rpx 0;
						background-color: #ffffff0d;
						border-radius: 8rpx;
						.text_8 {
							margin-left: 8rpx;
							margin-right: 4rpx;
						}
					}
				}

				.font_3 {
					font-size: 20rpx;
					font-family: SF Pro Display;
					color: #ffffff;
				}

				.group_4 {
					padding-left: 32rpx;
					padding-right: 32rpx;
				}

				.group_5 {
					padding: 80rpx 36rpx 68rpx;

					.divider {
						margin-top: 64rpx;
						opacity: 0.2;
						height: 1.62rpx;
						border: dotted 1.6rpx #ffffff;
					}

					.view {
						margin-top: 0;
					}

					.group_6 {
						opacity: 0.2;
						height: 135.06rpx;
						border-left: dotted 1.6rpx #ffffff;
						border-right: dotted 1.6rpx #ffffff;
						border-top: dotted 1.6rpx #ffffff;
						border-bottom: dotted 1.6rpx #ffffff;
					}

					.pos_2 {
						position: absolute;
						left: 231.26rpx;
						right: 453.12rpx;
						top: 213.16rpx;
					}

					.image-wrapper {
						padding-bottom: 80rpx;
						background-image: url('../../static/4f943fbcf9a756faeae58b0228cafde2.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-bottom: dotted 1.62rpx #ffffff;

						.image_5 {
							width: 616rpx;
							height: 334rpx;
						}
					}

					.pos {
						position: absolute;
						left: 36rpx;
						right: 34rpx;
						top: 0;
					}
				}

				.group_7 {
					padding: 24rpx 60rpx 28rpx;

					.font_5 {
						font-size: 16.28rpx;
						font-family: SF Pro Display;
						color: #ffffff;
					}
				}

				.view_2 {
					margin: 0 24rpx;
				}

				.text-wrapper_2 {
					flex: 1 1 228rpx;
					padding: 32rpx 0;
					background-color: #1b1d53;
					border-radius: 16rpx;
					.text_15 {
						margin-left: 24rpx;
					}
					.text_17 {
						margin-right: 16rpx;
					}

					.text_18 {
						margin-left: 24rpx;
					}

					.text_19 {
						margin-right: 48rpx;
					}

					.text_20 {
						margin-right: 20rpx;
					}

					.text_30 {
						margin-left: 24rpx;
					}

					.text_31 {
						margin-right: 20rpx;
					}
				}

				.text-wrapper_3 {
					flex: 1 1 228rpx;
					padding: 28rpx 0;
					background-color: #1b1d53;
					border-radius: 16rpx;
					height: 80rpx;

					.text_21 {
						margin-left: 24rpx;
					}

					.text_22 {
						margin-right: 48rpx;
					}

					.text_23 {
						margin-right: 20rpx;
					}

					.text_24 {
						margin-left: 24rpx;
					}

					.text_25 {
						margin-right: 48rpx;
					}

					.text_26 {
						margin-right: 20rpx;
					}
					.text_29 {
						margin-right: 20rpx;
					}

					.text_32 {
						margin-right: 4rpx;
					}

					.text_33 {
						margin-right: 48rpx;
					}

					.text_34 {
						margin-right: 20rpx;
					}
				}

				.font_6 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					color: #5ceec4;
				}
			}

			.section_3 {
				padding: 28rpx 20rpx 24rpx 24rpx;
				background-color: #1b1d53;
				border-radius: 16rpx;
				.font_7 {
					font-size: 24rpx;
					font-family: SF Pro Display;
					color: #ffffff;
				}

				.group_8 {
					padding: 6rpx 0;

					.divider_3 {
						margin-left: 8rpx;
						margin-right: 12rpx;
						background-color: #5ceec4;
						height: 2rpx;
					}

					.section_4 {
						background-color: #5ceec4;
						border-radius: 50%;
						height: 14rpx;
					}

					.pos_3 {
						position: absolute;
						left: 0;
						right: 629.58rpx;
						top: 0;
					}

					.pos_4 {
						position: absolute;
						left: 312rpx;
						right: 317.58rpx;
						top: 0;
					}

					.pos_5 {
						position: absolute;
						left: 624rpx;
						right: 5.58rpx;
						top: 0;
					}
				}

				.section_5 {
					margin-right: 4rpx;
					padding: 28rpx 24rpx 20rpx;
					background-color: #00033b80;
					border-radius: 8rpx;
					.font_9 {
						font-size: 20rpx;
						font-family: SF Pro Display;
						color: #ffffff;
					}
					.font_10 {
						font-size: 20rpx;
						font-family: SF Pro Display;
						color: #ffffff;
					}
					.text_43 {
						margin-top: 4rpx;
					}
					.group_9 {
						width: 332.44rpx;

						.text_46 {
							width: 281.5rpx;
						}
					}

					.group_10 {
						margin-right: 8rpx;

						.text_47 {
							width: 326rpx;
						}
					}
				}

				.section_6 {
					margin-right: 4rpx;
					padding: 22rpx 24rpx 0;
					background-color: #00033b80;
					border-radius: 8rpx;
					.image_6 {
						margin-right: 8rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.text_49 {
						margin-top: 16rpx;
					}

					.view_3 {
						margin-right: 8rpx;
						margin-top: 20rpx;
					}

					.group_11 {
						margin: 0 16rpx;
						padding: 28rpx 0 20rpx;

						.text_50 {
							width: 480rpx;
						}
					}
				}

				.font_11 {
					font-size: 24rpx;
					font-family: SF Pro Display;

					color: #ffffff;
				}

				.text_42 {
					word-break: break-all;
				}
			}

			.font_4 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #ffffff;
			}

			.font {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #ffffff;
			}

			.text_14 {
				opacity: 0.5;
			}

			.font_2 {
				font-size: 20rpx;
				font-family: SF Pro Display;
				color: #ffffff;
			}

			.divider_2 {
				background-color: #ffffff33;
				height: 2rpx;
			}
		}

		.section_7 {
			padding: 20rpx 32rpx 32rpx 32rpx;
			background-color: #1b1d53;

			.text_51 {
				color: #5ceec4;
				font-size: 24rpx;
				font-family: SF Pro Display;
				font-weight: 300;
			}

			.text-wrapper_4 {
				padding: 24rpx 0;
				flex: 1 1 328rpx;
				background-color: #ffffff;
				border-radius: 50rpx;
				.text_52 {
					color: #333333;
				}
			}

			.text-wrapper_5 {
				padding: 24rpx 0;
				flex: 1 1 328rpx;
				background-color: #5ceec4;
				border-radius: 50rpx;
				.text_53 {
					color: #333333;
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: 700;
				}
			}
		}

		.font_8 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #ffffff;
		}
	}
</style>